<template>
  <div class="common-tab">
    <div class="u-p-20 p-b-0">
      <div v-for="(tab, index) in tabList" :key="index" class="btn-item">
        <el-badge :value="tab.sum" class="item" v-if="tab.sum > 0">
          <el-button
            :type="activeTab === tab.name ? 'primary' : 'info'"
            @click="onChangeTab(tab.name)"
          >
            {{ tab.title }}
          </el-button>
        </el-badge>
        <el-button
          v-else
          :type="activeTab === tab.name ? 'primary' : 'info'"
          @click="onChangeTab(tab.name)"
        >
          {{ tab.title }}
        </el-button>
      </div>
    </div>
    <div class="tab-content">
      <keep-alive>
        <component :is="activeComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  name: "CommonTab",
  props: {
    viewName: {
      type: String,
    },
    tabList: {
      type: Array,
    },
  },
  data() {
    return {
      // activeTab:'',
      apps: [],
    };
  },
  computed: {
    ...mapGetters(["activeTab"]),
    activeComponent() {
      return this.apps[this.activeTab];
    },
  },
  methods: {
    ...mapMutations(["setActiveTab"]),
    onChangeTab(tabName) {
      // this.activeTab = tabName
      this.setActiveTab(tabName);
    },
  },
  created() {
    if (this.tabList.length > 0) {
      this.tabList.forEach((item) => {
        // this.apps[item.name] = ()=>import(`@/views/${this.viewName}/tabs/${item.name.toLowerCase()}.vue`)
        this.apps[item.name] = () => import(`@/views/${item.path}`);
        // console.log(`@/views/${item.path}`)
      });
      let index = this.tabList.findIndex((v) => {
        return v.name == this.activeTab;
      });
      let activeTab = index >= 0 ? this.activeTab : this.tabList[0].name;
      this.setActiveTab(activeTab);
    }
  },
};
</script>

<style lang="scss" scoped>
.common-tab {
  height: 100%;
  .p-b-0 {
    padding-bottom: 0;
  }
}
.btn-item {
  width: fit-content;
  display: inline-block;
  margin-top: 10px;
  margin-right: 40px;
}
</style>
